@use "@/assets/styles/globalVar.scss" as *;

:deep(.cb-common-box) {
  background-color: $cb-bg-color;
  border: 1px solid $cb-border-color;
  border-radius: 4px;
  padding: 16px;
  box-shadow: $cb-box-shadow-light;
}

:deep(.cb-table-box) {
  margin-bottom: 32px;
}

:deep(.cb-main-container) {
  display: flex;
  height: 100%;
  width: 100%;

  .search-box {
    margin-bottom: 16px;
    padding-bottom: 0;
  }

  .main-box {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

//圆角边框样式
@mixin borderRadiusEffect {
  border-radius: $cb-border-radius-value;
}

// 边框阴影样式
@mixin borderShadowEffect {
  box-shadow: 0 5px 30px 0 rgba(100, 100, 111, 0.2);
}

//间距样式
@mixin paddingEffect($paddingValue: $cb-padding-value) {
  padding: $paddingValue;
}

//圆形Box样式
@mixin circleBox($width: 64px, $height: 64px, $color: $cb-color-success) {
  background-color: $color;
  border-radius: 45px;
  width: $width;
  height: $height;
}

//Flex布局居中样式
@mixin flexCenterStyle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 容器样式: 圆角、背景色 */
@mixin containerStyle {
  @include borderRadiusEffect;
  background-color: $cb-bg-color;
  box-sizing: border-box;
  padding: $cb-padding-value;
}

/* 容器样式拓展1: 新增阴影效果 */
@mixin containerStyleExt1 {
  @include containerStyle;
  &:hover {
      @include borderShadowEffect()
  }
}

/* 标题方形符号前缀 */
@mixin titleSquareSymbolPrefix($width, $height, $margin) {
  position: relative;
  margin-left: $margin;

  &:before {
    position: absolute;
    top: 0;
    left: -$margin;
    width: $width;
    height: $height;
    border-radius: $cb-border-radius-value;
    display: inline-block;
    background-color: $cb-color-primary;
    content: '';
  }
}

/* ElementUI Plus 全局配置 */
//:deep(.el-form-item) {
//  margin-bottom: 0;
//}
